<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>用户注册</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 40px;
        }
        .container {
            max-width: 400px;
            margin: auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .login-link {
            text-align: center;
            margin-top: 15px;
        }
        .login-link a {
            color: #4CAF50;
            text-decoration: none;
        }

        h2 {
            text-align: center;
        }
        input[type="text"], input[type="password"], select {
            width: 100%;
            padding: 8px;
            margin-top: 8px;
            margin-bottom: 16px;
            box-sizing: border-box;
        }
        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
<%
    //如果session中有account，则跳转到主页
    if (session.getAttribute("account") != null) {
%>
        <jsp:forward  page="index.jsp"/>
<%
    }
%>
<div class="container">
    <h2>注册</h2>
    <form action="${pageContext.request.contextPath}/register/tenant" method="post" onsubmit="return validateForm()">
        <p style="color: red">${error}</p>
        <label for="username">登录账号：</label>
        <input type="text" id="username" name="username" required>

        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required>

        <label for="confirmPassword">确认密码：</label>
        <input type="password" id="confirmPassword" name="confirmPassword" required>

        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" required>

        <label for="phone">手机号(注册时需要填写一个手机号，后续可在系统中添加其他手机号)</label>
        <input type="text" id="phone" name="phone" required>

        <label for="bankAccount">银行账号：</label>
        <input type="text" id="bankAccount" name="bankAccount" required>

        <label for="emergencyName">紧急联系人姓名：</label>
        <input type="text" id="emergencyName" name="emergencyName" required>

        <label for="emergencyPhone">紧急联系人电话：</label>
        <input type="text" id="emergencyPhone" name="emergencyPhone" required>

        <input type="submit" value="注册">
        <div class="login-link">
            <p>已有账号? <a href="${pageContext.request.contextPath}/login.jsp">立即登录</a></p>
        </div>
    </form>
</div>

<script>
    document.querySelector("form").onsubmit = function (e) {
        // 获取输入值
        const name = document.querySelector("input[name='name']").value.trim();
        const password = document.querySelector("input[name='password']").value.trim();
        const confirmPassword = document.querySelector("input[name='confirmPassword']").value.trim();
        const phone = document.querySelector("input[name='phone']").value.trim();
        const bankAccount = document.querySelector("input[name='bankAccount']").value.trim();

        // 姓名验证：只能是纯中文 或 含空格的英文字母
        const chineseNameRegex = /^[\u4e00-\u9fa5]+$/; // 纯中文
        const englishNameRegex = /^[a-zA-Z\s]+$/;     // 英文或含空格的英文名

        if (!chineseNameRegex.test(name) && !englishNameRegex.test(name)) {
            alert("姓名必须为纯中文或英文（英文可带空格），不允许有其他字符！");
            e.preventDefault(); // 阻止表单提交
            return false;
        }

        // 密码验证：至少8位，且不包含空格
        const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
        if (!passwordRegex.test(password)) {
            alert("密码必须至少8位，且不能包含空格或特殊字符！");
            e.preventDefault(); // 阻止表单提交
            return false;
        }

        // 确认密码验证
        if (password !== confirmPassword) {
            alert("两次输入的密码不一致，请重新输入！");
            e.preventDefault(); // 阻止表单提交
            return false;
        }

        // 手机号验证：11位数字，以1开头
        const phoneRegex = /^1\d{10}$/;
        if (!phoneRegex.test(phone)) {
            alert("请输入有效的手机号码！");
            e.preventDefault(); // 阻止表单提交
            return false;
        }

        // 银行卡号验证：16-19位数字
        const bankAccountRegex = /^\d{16,19}$/;
        if (!bankAccountRegex.test(bankAccount)) {
            alert("请输入有效的银行卡号！");
            e.preventDefault(); // 阻止表单提交
            return false;
        }

        // 所有验证通过
        return true;
    };
</script>

</body>
</html>
